<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>针对用户的管理策略</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- basic styles -->

        <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../../assets/css/font-awesome.min.css" />

        <link rel="stylesheet" href="../../assets/css/datepicker.css" />
        <link rel="stylesheet" href="../../assets/css/bootstrap-timepicker.css" />

        <!-- ace styles -->

        <link rel="stylesheet" href="../../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-skins.min.css" />

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="../../assets/css/ace-ie.min.css" />
        <![endif]-->

        <script src="../../assets/js/ace-extra.min.js"></script>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

        <!--[if lt IE 9]>
        <script src="../../assets/js/html5shiv.js"></script>
        <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->

        <style>
            @font-face { 
                font-family: "Open Sans"; /*这里是说明调用来的字体名字*/ 
                src: url('../../assets/font/OpenSans-Regular.ttf'); /*这里是字体文件路径*/ 
            } 
        </style>
    </head>

    <body>

        <div class="main-container">
            <div class="page-content">
                <div class="row">
                    <div class="col-sm-6">
                        <h4 style="padding-left:20px; margin-top: 20px;" class='header smaller lighter blue'>应用层DDoS异常流量管理策略编辑</h4>
                        <form id="form" class="form-horizontal" role="form">

                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label no-padding-right"> 攻击类型 </label>

                                <div class="col-sm-9">
                                    <select id="attack-type" class="form-control input-medium">
                                        <option value="1">ICMP Redirection</option>
                                        <option value="2">ICMP Unreacheble</option>
                                        <option value="3">TCP anomaly Connection</option>
                                        <option value="4">DNS Query Application Attack</option>
                                        <option value="5">DNS Reply Application Attack</option>
                                        <option value="6">SIP Application Attack</option>
                                        <option value="7">HTTPS Application Attack</option>
                                        <option value="8">HTTP GET Application Attack</option>
                                        <option value="9">Challenge Collapsar Attack</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label no-padding-right"> 判定为攻击阈值 </label>

                                <div class="col-sm-9">
                                    <input type="text" class="input-small" id="attack-threshold" name="attack-threshold" placeholder=""> PPS
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label no-padding-right"> 攻击控制阈值 </label>

                                <div class="col-sm-9">
                                    <input type="text" class="input-small" id="control-threshold" name="control-threshold" placeholder=""> PPS
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-3 col-md-9 col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-info btn-sm">
                                        <i class="icon-ok"></i>
                                        添加
                                    </button>
                                </div>
                            </div>

                        </form>

                    </div>

                    <div class="col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4>DDoS异常流量管理策略列表</h4><br>
                                <span class="text-danger">注：列表显示格式为“攻击类型，判定为攻击阈值，攻击控制阈值”</span>

                            </div>
                            <div class="widget-body">
                                <div class="widget-main">
                                    <div class="form-group">
                                        <label for="" class="col-sm-3 control-label no-padding-right"> 策略名称 </label>
                                        <div class="col-sm-9">
                                            <input type="text" class="input-medium policy_desc" placeholder="" id="" name="policy-name">
                                        </div>
                                    </div>
                                    <br><span class="blue">列表</span>
                                    <ul id="list"></ul>
                                    <hr>
                                    <button type="button" class="btn btn-sm btn-danger up">
                                        <i class="icon-arrow-left"></i>
                                        查看上一个版本
                                    </button>
                                    &nbsp; &nbsp; &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger next" disabled="">
                                        <i class="icon-arrow-right"></i>
                                        查看下一个版本
                                    </button>
                                    &nbsp; &nbsp; &nbsp;
                                    <button type="button" class="btn btn-sm btn-danger" onclick="previous();">
                                        <i class="icon-undo"></i>
                                        返回
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- basic scripts -->

        <!--[if !IE]> -->

        <script src="../../assets/js/jquery.js"></script>

        <!-- <![endif]-->

        <!--[if IE]>
        <script type="text/javascript">
         window.jQuery || document.write("<script src='../../assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
        </script>
        <![endif]-->

        <script src="../../assets/js/bootstrap.min.js"></script>
        <script src="../../assets/js/typeahead-bs2.min.js"></script>
        <script src="../../assets/js/jquery.validate.js"></script>
        <script src="../../assets/js/jquery.validate-util.js"></script>
        <script src="../../assets/js/ace-elements.min.js"></script>
        <script src="../../assets/js/ace.min.js"></script>
        <script src="../../assets/js/plugin/menu/menu.js"></script>
        <script src="../../assets/js/Base64.js"></script>
        <script src="logic.js"></script>

        <script type="text/javascript">
                                        var base64 = new Base64();
                                        var type = getQueryString("type");
                                        var DepotID = getQueryString("DepotID");
                                        var DepotName = getQueryString("DepotName");
                                        DepotName = base64.decode(DepotName);
                                        var id = getQueryString("id");
                                        var policyArray, policyAmount, actualQuantity;
                                        // 移除策略
                                        function delStrategy(obj) {
                                            $(obj).closest("li").remove();
                                        }

                                        jQuery(function($) {
                                            $(".header").text(DepotName + "  策略管理");
                                            getAllPolicy();
                                            //初始化数据
                                            actualQuantity = policyAmount - 1;
                                            show_oldPolicy(policyArray, actualQuantity);
                                            if (actualQuantity == 0) {
                                                $(".up").attr("disabled", "");
                                            }
                                            if (actualQuantity == (policyAmount - 1)) {
                                                $(".next").attr("disabled", "");
                                            }
                                            $(".up").click(function() {
                                                actualQuantity = actualQuantity - 1;
                                                show_oldPolicy(policyArray, actualQuantity);
                                                $(".next").removeAttr("disabled");
                                                if (actualQuantity == 0) {
                                                    $(".up").attr("disabled", "");
                                                }
                                            });
                                            $(".next").click(function() {
                                                actualQuantity = actualQuantity + 1;
                                                show_oldPolicy(policyArray, actualQuantity);
                                                $(".up").removeAttr("disabled");
                                                if (actualQuantity == (policyAmount - 1)) {
                                                    $(".next").attr("disabled", "");
                                                }
                                            });
                                            $("#form").validate({
                                                errorClass: "help-block",
                                                errorElement: "div",
                                                errorPlacement: function(e, r) {
                                                    r.parents(".form-group > div").append(e);
                                                },
                                                highlight: function(e) {
                                                    $(e).closest(".form-group").removeClass("has-success has-error").addClass("has-error"),
                                                            $(e).closest(".help-block").remove();
                                                },
                                                success: function(e) {
                                                    e.closest(".form-group").removeClass("has-success has-error"),
                                                            e.closest(".help-block").remove();
                                                },
                                                rules: {
                                                    "attack-threshold": {
                                                        required: !0,
                                                        number: !0
                                                    },
                                                    "control-threshold": {
                                                        required: !0,
                                                        number: !0
                                                    }
                                                },
                                                messages: {
                                                    "attack-threshold": {
                                                        required: "输入不能为空！",
                                                        number: "请输入数字！"
                                                    },
                                                    "control-threshold": {
                                                        required: "输入不能为空！",
                                                        number: "请输入数字！"
                                                    }
                                                },
                                                submitHandler: function() {
                                                    var attack_type = $("#attack-type option:selected").val();
                                                    var attack_name = $("#attack-type option:selected").text();
                                                    var attack_threshold = $("#attack-threshold").val();
                                                    var control_threshold = $("#control-threshold").val();

                                                    // 验证成功添加到右侧
                                                    // 添加策略
                                                    var straStr = "";
                                                    straStr += '<li class="lis" type="' + attack_type + '"><span>' + attack_name + ',' + attack_threshold + ',' + control_threshold + '</span><button class="btn btn-link" type="button" onclick="delStrategy(this)"><i class="icon icon-remove red"></i></button></li>';
                                                    $("#list").append(straStr);
                                                    $("#attack-threshold").val("");
                                                    $("#control-threshold").val("");

                                                }

                                            });

                                        });
        </script>
    </body>
</html>
